<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>山东省足球运动协会</title>
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <link href="./css/bootstrap.min.css" rel="stylesheet">
    <link href="./css/main.css" rel="stylesheet">
    <style>
        html {
            min-height: 100% !important;
        }

        .page .selected {
            background: #2d98e6;
            color: #fff
        }

        .row {
            margin: 0;
        }
    </style>
    <style>
        .container {
            min-width: 1340px;
            padding: 0;
        }

        .header {
            background: #fff;
        }

        .header1 {
            height: 76px;
            background: #fff;
        }

        .header2 {
            height: 47px;
            background: #009933;
        }

        .inline-block {
            display: inline-block;
        }

        .header-title {
            font-size: 40px;
            line-height: 76px;
            font-weight: 700;
        }

        .header1 .search {
            position: relative;
            top: 50%;
            margin-top: -20px;
            right: 100px;

        }

        .header1 .do {
            line-height: 76px;
            position: relative;
            right: 20px;
            font-size: 13px;
        }

        .header .input-group input {
            width: 267px;
            height: 40px;
            border-radius: 0;
            font-size: 13px;
            outline-color: invert;
            outline-style: none;
            outline-width: 0px;
            border: 1px solid #e4e4e4;
            text-shadow: none;
            -webkit-appearance: none;
            -webkit-user-select: text;
            outline-color: transparent;
            box-shadow: none;
        }

        .header .input-group span {
            width: 70px;
            height: 40px;
            font-size: 24px;
            text-align: center;
            line-height: 40px;
            background: #009933;
            color: #fff;
            margin-top: -1px;
        }

        .header2 .item {
            width: 163px;
            height: 47px;
            color: #fff;
            float: left;
            line-height: 47px;
            text-align: center;
            font-size: 16px;
        }

        .header2 .item:hover {
            background: #006633;
        }

        .header2 .item.active {
            background: #006633;
        }

        .swiper .swiper-left {
            width: 1058px;
            height: 506px;
            float: left;
        }

        .swiper .swiper-right {
            width: 273px;
            height: 506px;
            float: left;
            margin-left: 9px;
        }

        .header,
        .swiper,
        .dangjian,
        .list,
        .footer {
            min-width: 1340px;
        }

        #swiperDemo {
            width: 100%;
            height: 100%;
        }

        #swiperDemo .carousel-inner {
            width: 100%;
            height: 100%;
        }

        #swiperDemo .carousel-inner .item {
            width: 100%;
            height: 100%;
        }

        #swiperDemo .carousel-inner .item img {
            width: 100%;
            height: 100%;
        }

        .swiper-right .active {
            border-bottom: 1px solid #a1a1a1;
            font-weight: 700;
        }

        .swiper-right a {
            color: #000;
        }

        .dangjian {
            margin-top: 15px;
            height: 107px;
        }

        .list .item {
            line-height: 40px;
        }

        .partner {
            background-image: linear-gradient(-45deg, #fff 25%, #f2f2f2 0, #f2f2f2 50%, #fff 0, #fff 75%, #f2f2f2 0);
            background-size: 10px 10px;
            padding: 0;
            margin: 0 auto;
            margin-bottom: 30px;
            padding: 30px 20px;
        }

        .partner .logo {
            width: 144px;
            margin: 5px 3px;
            height: 72px;
        }

        .col-xs-4 .col-xs-6 {
            height: 175px;
        }

        .col-xs-4 .col-xs-6 .item {
            margin-top: 20px;
            border: 1px solid #dadada;
            padding: 5px;
            line-height: 25px;
        }

        .footer {
            height: 207px;
            background-color: #006633;
            text-align: center;
            font-size: 18px;
            color: #FFFFFF;
            padding-top: 40px;
            line-height: 45px;
            margin-top: 30px;
        }

        th,
        td {
            font-size: 15px;
            line-height: 2 !important;
            padding: 10px 10px 10px 20px !important;
        }

        .alignleft {
            text-align: left !important;
        }

        .borderright {
            border-right: 1px solid #ddd;
            text-align: left;
            padding-left: 68px !important;
        }

        #paycode img {
            width: 100%;
        }

        #count-down>span {
            font-weight: bolder;
            font-size: 15px;
        }

        .layui-layer-page .layui-layer-btn {
            padding-bottom: 25px;
        }


        html {
            height: 100% !important;
        }

        body {
            position: relative !important;
            min-height: 100% !important;
            box-sizing: border-box !important;
            padding-bottom: 165px !important;
            /* .footer 的高度，为 footer 占位 */
        }

        .footer {
            position: absolute !important;
            bottom: 0 !important;
            left: 0 !important;
            width: 100% !important;
            height: 115px !important;
        }

        .layui-layer-btn .layui-layer-btn0 {
            border-color: #009933 !important;
            background-color: #009933 !important;
        }

        .table>tbody>tr>td,
        .table>tbody>tr>th,
        .table>tfoot>tr>td,
        .table>tfoot>tr>th,
        .table>thead>tr>td,
        .table>thead>tr>th {
            border: 1px solid #ddd;
        }

        .layui-layer-hui .layui-layer-content {
            padding: 12px 25px;
            text-align: left !important;
        }
    </style>

</head>

<body>
    <div class="header">
        <div class="container" style="font-size: 12px;height: 0;padding-top: 3px;">
            返回<a href="http://newtest.sdfa.org.cn/" style="position: relative;z-index: 999;"> 山东省足球运动协会</a> 网站
        </div>
        <div class="container header1">
            <div class="pull-left header-title">山东省足球发展基金会</div>
            <div class="pull-right do">
                <div class="does1" style="display:none">
                    <a href="http://newtest.sdfa.org.cn/footballAssociation/zuxie/login.html"><span>登录</span></a>
                    |
                    <a href="http://newtest.sdfa.org.cn/footballAssociation/zuxie/register.html"><span>注册</span></a>
                </div>
                <div class="does2" style="display: block;">
                    <span>欢迎<span id="telphone" style="margin:0"></span></span>
                    |
                    <span><a href="http://newtest.sdfa.org.cn/footballAssociation/zuxie/personal.html"
                            id="nickname">个人中心</a></span>
                    |
                    <span class="logout" style="cursor: pointer;">退出</span>
                </div>
            </div>
            <div class="pull-right search">
                <form action="http://newtest.sdfa.org.cn/result.html" method="post">
                    <div class="input-group">
                        <input type="text" name="word" value="" autocomplete="off" class="form-control inline-block"
                            placeholder="请输入您要搜索的内容">
                        <span class="glyphicon glyphicon-search inline-block"
                            onclick="$('.header form').submit()"></span>
                    </div>
                </form>
            </div>

        </div>
        <div class="header2">
            <div class="container">
                <a href="http://newtest.sdfa.org.cn/foundation/index.html?id=100">
                    <div class="item ">首页</div>
                </a>
                <a href="http://newtest.sdfa.org.cn/foundation/NewsEvents.html?id=93">
                    <div class="item ">新闻动态</div>
                </a>
                <a href="http://newtest.sdfa.org.cn/foundation/NewsEvents.html?id=94">
                    <div class="item ">公益项目</div>
                </a>
                <a href="http://newtest.sdfa.org.cn/foundation/donation.html?id=95">
                    <div class="item active">爱心捐赠</div>
                </a>
                <a href="http://newtest.sdfa.org.cn/foundation/partners.html?id=96">
                    <div class="item ">合作伙伴</div>
                </a>
                <a href="http://newtest.sdfa.org.cn/foundation/aboutUs.html?id=98">
                    <div class="item ">关于我们</div>
                </a>
            </div>
        </div>
    </div>
    <!-- 当前位置 -->
    <div class="thislocation container" style="margin-top: 17px;">
        <span>当前位置：</span>
        <span>爱心捐赠</span>
    </div>
    <!-- 主要内容 -->
    <div class="noticemain container" style="box-shadow: 0px 2px 4px #ccc;text-align: center;margin-bottom: 50px;">
        <!-- 右侧列表 -->
        <div class="donation1">
            <div class="row">
                <div class="col-xs-4"
                    style="box-shadow: 0px 4px 5px -3px #ccc;text-align: center;line-height: 92px;font-size: 25px;">
                    <img src="./img/tishi1.png" alt="" style="width: 50px;height: 50px;">&emsp;温馨提示
                </div>
                <div class="col-xs-4"
                    style="box-shadow: 0px 4px 5px -3px #ccc;text-align: center;line-height: 92px;font-size: 25px;color: #ccc;">
                    <img src="./img/suo.png" alt="" style="width: 50px;height: 50px;">&emsp;确认收款信息
                </div>
                <div class="col-xs-4"
                    style="box-shadow: 0px 4px 5px -3px #ccc;text-align: center;line-height: 92px;font-size: 25px;color: #ccc;">
                    <img src="./img/zhifu.png" alt="" style="width: 50px;height: 50px;">&emsp;在线支付
                </div>
            </div>
            <div class="row" style="text-align: center;font-size: 16px;line-height: 31px;">
                <span style="color: red;line-height: 80px;font-size: 22px;">温馨提示</span><br>
                只需您进行简单填写表格，我们就可以为您建立终身爱心档案。您可以随时查询自己的每一笔捐赠，见证自己的爱心成长。<br>
                如果您已成为注册账户，请直接登录并进行在线捐赠，在捐赠人一栏中显示您的注册用户名。<br>
                此外您也可以选择匿名方式进行在线捐赠，在捐赠人一栏中显示为“爱心人士”。<br>
                山东足球基金会感谢您的慈心善举！<br>
                如您需要开具捐赠发票，请发邮件@163.com 咨询
            </div>
            <button type="button" class="btn btn-danger next-button1" style="margin: 30px;width: 140px;">下一步</button>
        </div>
        <div class="donation2" style="display: none;">
            <div class="row">
                <div class="col-xs-4"
                    style="box-shadow: 0px 4px 5px -3px #ccc;text-align: center;line-height: 92px;font-size: 25px;color: #ccc;">
                    <img src="./img/tishi.png" alt="" style="width: 50px;height: 50px;">&emsp;温馨提示
                </div>
                <div class="col-xs-4"
                    style="box-shadow: 0px 4px 5px -3px #ccc;text-align: center;line-height: 92px;font-size: 25px;">
                    <img src="./img/suo1.png" alt="" style="width: 50px;height: 50px;">&emsp;确认收款信息
                </div>
                <div class="col-xs-4"
                    style="box-shadow: 0px 4px 5px -3px #ccc;text-align: center;line-height: 92px;font-size: 25px;color: #ccc;">
                    <img src="./img/zhifu.png" alt="" style="width: 50px;height: 50px;">&emsp;在线支付
                </div>
            </div>
            <div class="row" style="text-align: center;font-size: 16px;line-height: 31px;">
                <table class="table table-striped">
                    <tbody>
                        <tr>
                            <th class="alignleft" colspan="2" style="font-weight: 500">
                                请正确填写捐款人信息。标注（*）为必填选项。
                            </th>
                        </tr>
                        <tr>
                            <td width="20%" class="borderright">金额（*）</td>
                            <td class="alignleft">
                                <label style="font-weight: 200;">
                                    <input style="margin-right: 8px;width: 14px;" class="jineradio" type="radio"
                                        name="jine" value="10">10
                                </label>
                                <label style="font-weight: 200;margin-left: 30px;">
                                    <input style="margin-right: 8px;width: 14px;" class="jineradio" type="radio"
                                        name="jine" value="50">50
                                </label>
                                <label style="font-weight: 200;margin-left: 30px;">
                                    <input style="margin-right: 8px;width: 14px;" class="jineradio" type="radio"
                                        name="jine" value="100">100
                                </label>
                                <label style="font-weight: 200;margin-left: 30px;">
                                    <input style="margin-right: 8px;width: 14px;" class="jineradio" type="radio"
                                        name="jine" value="200">200
                                </label>
                                <label style="font-weight: 200;margin-left: 30px;">
                                    <input style="margin-right: 8px;width: 14px;" class="jineradio" type="radio"
                                        name="jine" value="500">500
                                </label>
                                <label style="font-weight: 200;margin-left: 30px;">
                                    <input style="margin-right: 8px;width: 14px;" class="jineradio" type="radio"
                                        name="jine" value="1000">1000
                                </label>
                                <label style="font-weight: 200;margin-left: 30px;">
                                    <input style="margin-right: 8px;width: 14px;" class="otherjineradio" type="radio"
                                        name="jine" value="qita">其他金额
                                </label>
                                <input style="width: 70px;padding-left: 5px;margin-left: 10px;display: none;"
                                    class="otherjineinput" type="text" name="" id="">
                            </td>
                        </tr>
                        <tr>
                            <td width="20%" class="borderright">是否显示姓名（*）</td>
                            <td class="alignleft">
                                <label style="font-weight: 200;">
                                    <input style="margin-right: 8px;" class="showname" type="radio" name="showname"
                                        value="1">实名
                                </label>
                                <label style="font-weight: 200;margin-left: 30px;">
                                    <input style="margin-right: 8px;" class="showname" type="radio" name="showname"
                                        value="0">匿名
                                </label>
                            </td>
                        </tr>
                        <tr class="writeName" style="display: none;">
                            <td width="20%" class="borderright">联系方式（*）</td>
                            <td class="alignleft">
                                <label style="font-weight: 200;">
                                    <div style="margin:10px 0">
                                        <div style="display: inline-block;width: 100px;"> 捐赠人姓名：
                                        </div>
                                        <input type="text" style="margin-right: 8px;padding-left: 10px;"
                                            placeholder="捐赠人姓名" class="name">
                                    </div>
                                    <div style="margin:10px 0">
                                        <div style="display: inline-block;width: 100px;"> 手机号码：
                                        </div>
                                        <input type="text" style="margin-right: 8px;padding-left: 10px;"
                                            placeholder="手机号码" class="tel">
                                    </div>
                                    <div style="margin:10px 0">
                                        <div style="display: inline-block;width: 100px;"> 电子邮箱：
                                        </div>
                                        <input type="text" style="margin-right: 8px;padding-left: 10px;"
                                            placeholder="电子邮箱" class="email">
                                    </div>
                                </label>
                            </td>
                        </tr>
                        <tr>
                            <td width="20%" class="borderright">付款方式（*）</td>
                            <td class="alignleft">
                                <label style="font-weight: 200;">
                                    <input style="margin-right: 8px;" class="zhifufangshi" type="radio"
                                        name="zhifufangshi" value="2">微信
                                </label>
                                <label style="font-weight: 200;margin-left: 30px;">
                                    <input style="margin-right: 8px;" class="zhifufangshi" type="radio"
                                        name="zhifufangshi" value="1">支付宝
                                </label>
                                <label style="font-weight: 200;margin-left: 30px;">
                                    <input style="margin-right: 8px;" class="zhifufangshi" type="radio"
                                        name="zhifufangshi" value="3">线下
                                </label>
                            </td>
                        </tr>
                        <tr class="kanum" style="display: none;">
                            <td width="20%" class="borderright">您的转账卡号</td>
                            <td class="alignleft">
                                <label style="font-weight: 200;">
                                    <div style="margin:10px 0">
                                        <input type="text" style="margin-right: 8px;padding-left: 10px;"
                                            placeholder="转账卡号" id="kanum">
                                    </div>
                                </label>
                            </td>
                        </tr>
                        <tr>
                            <td width="20%" class="borderright">捐赠留言</td>
                            <td class="alignleft">
                                <textarea name="liuyan" class="liuyan" cols="70" rows="3"></textarea>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" class="borderright" style="border-bottom: 1px solid #ddd;">
                                <label style="font-weight: 200;margin-left: 222px;">
                                    <input style="margin-right: 8px;" class="juanzengxieyi" type="checkbox"
                                        name="juanzengxieyi" value="2">我已阅读
                                    <a style="color: #d9534f;" target="_blank"
                                        href="http://newtest.sdfa.org.cn/footballAssociation/zuxie/aixinjuanzengxieyi.html">《捐赠协议》</a>
                                </label>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <button type="button" class="btn btn-danger pre-button1" style="margin: 30px;width: 140px;">上一步</button>
            <button type="button" class="btn btn-danger next-button2" style="margin: 30px;width: 140px;">下一步</button>
        </div>
        <div class="donation3" style="display: none;">
            <div class="row">
                <div class="col-xs-4"
                    style="box-shadow: 0px 4px 5px -3px #ccc;text-align: center;line-height: 92px;font-size: 25px;color: #ccc;">
                    <img src="./img/tishi.png" alt="" style="width: 50px;height: 50px;">&emsp;温馨提示
                </div>
                <div class="col-xs-4"
                    style="box-shadow: 0px 4px 5px -3px #ccc;text-align: center;line-height: 92px;font-size: 25px;color: #ccc;">
                    <img src="./img/suo.png" alt="" style="width: 50px;height: 50px;">&emsp;确认收款信息
                </div>
                <div class="col-xs-4"
                    style="box-shadow: 0px 4px 5px -3px #ccc;text-align: center;line-height: 92px;font-size: 25px;">
                    <img src="./img/zhifu1.png" alt="" style="width: 50px;height: 50px;">&emsp;在线支付
                </div>
            </div>
            <div class="row" style="text-align: center;font-size: 16px;line-height: 31px;">
                <table class="table table-striped">
                    <tbody>
                        <tr>
                            <th class="alignleft" colspan="2" style="font-weight: 500">
                                请正确填写捐款人信息。标注（*）为必填选项。
                            </th>
                        </tr>
                        <tr>
                            <td width="20%" class="borderright">金额（*）</td>
                            <td class="alignleft" id="jine">

                            </td>
                        </tr>
                        <tr>
                            <td width="20%" class="borderright">是否显示姓名（*）</td>
                            <td class="alignleft" id="showname">

                            </td>
                        </tr>
                        <tr class="shiming">
                            <td width="20%" class="borderright">捐赠人姓名（*）</td>
                            <td class="alignleft" id="name">

                            </td>
                        </tr>
                        <tr class="shiming">
                            <td width="20%" class="borderright">手机号码（*）</td>
                            <td class="alignleft" id="tel">

                            </td>
                        </tr>
                        <tr class="shiming">
                            <td width="20%" class="borderright">电子邮箱（*）</td>
                            <td class="alignleft" id="email">

                            </td>
                        </tr>
                        <tr>
                            <td width="20%" class="borderright">付款方式（*）</td>
                            <td class="alignleft" id="payway">

                            </td>
                        </tr>
                        <tr class="kahao">
                            <td width="20%" class="borderright">转账卡号</td>
                            <td class="alignleft" id="kanum1">

                            </td>
                        </tr>
                        <tr>
                            <td width="20%" class="borderright">捐赠留言</td>
                            <td class="alignleft" id="msg">

                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <button type="button" class="btn btn-danger pre-button2" style="margin: 30px;width: 140px;">上一步</button>
            <button type="button" class="btn btn-danger next-button3" style="margin: 30px;width: 140px;" id="pay">在线支付
            </button>
            <button type="button" class="btn btn-danger next-button4" style="margin: 30px;width: 140px;">线下支付信息
            </button>
        </div>
    </div>
    <div id="pay1" style="display: none;">
        <div style="width: 170px;height: 255px;border: none;overflow: hidden;margin: 0 auto;">
            <div class="paycode-box">
                <div id="count-down" style="margin-top: 30px">
                    <span class="count-title">支付时间剩余:</span>
                    <span id="minute">05</span>分
                    <span id="second">00</span>秒
                    <span id="error" style="color: red;font-size: 8px;display: none"></span>
                </div>
                <div id="paycode" style="width: 160px;height: 160px;margin: 20px 0"></div>
            </div>
        </div>
    </div>

    <!-- 底部 -->
    <div class="footer" style="min-width: 100%;">
        <div>
            版权所有：山东省足球发展基金会官方网站
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            ICP经营许可证：鲁ICP备15020327号
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            山东乐体网络科技有限公司
        </div>
    </div>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/layer/layer.js"></script>
    <script src="./js/qrcode.min.js"></script>
    <script>
        var global_nickName = sessionStorage.nickName;
        var global_userId = sessionStorage.userId;
        var global_tel = sessionStorage.tel;
        $("#telphone").text(global_tel)
        if (global_userId) {
            $('.do .does1').css('display', 'none')
            $('.do .does2').css('display', 'block')
        } else if (global_nickName == undefined || global_nickName == "") {
            $('.do .does1').css('display', 'block')
            $('.do .does2').css('display', 'none')
        }
        var jine, showname, payway, msg, isagree, name, tel, email, zhifufangshi, kanum
        var timeOut, countTimeOut, codeLimitTime = 300;
        //点击实名显示姓名
        $(".showname").on("click", function () {
            showname = $("input[name='showname']:checked").val();
            if (showname == "0") { //匿名
                $(".writeName").css("display", "none")
                $(".writeName input").val("")
            } else if (showname == "1") { //实名
                $(".writeName").css("display", "table-row")
            }
        })
        //点击银行卡号
        $(".zhifufangshi").on("click", function () {
            zhifufangshi = $("input[name='zhifufangshi']:checked").val();
            if (zhifufangshi == "1" || zhifufangshi == "2") { //线上
                $(".kanum").css("display", "none")
                $(".kanum input").val("")
            } else if (zhifufangshi == "3") { //线下
                $(".kanum").css("display", "table-row")
            }
        })
        // 点其他金额出现输入框
        $(".jineradio").on("click", function () {
            $(".otherjineinput").css("display", "none")
        })
        $(".otherjineradio").on("click", function () {
            $(".otherjineinput").css("display", "inline-block")
        })
        // 第一个下一步显示下个页面
        $(".next-button1").on("click", function () {
            $(".donation1").css("display", "none")
            $(".donation2").css("display", "block")
        })
        // 第一个上一步显示上个页面
        $(".pre-button1").on("click", function () {
            $(".donation1").css("display", "block")
            $(".donation2").css("display", "none")
        })
        // 第er个下一步显示下个页面
        $(".next-button2").on("click", function () {

            jine = $("input[name='jine']:checked").val();
            if (jine == "qita") {
                jine = $(".otherjineinput").val()
            }
            if (jine == "" || jine == undefined) {
                layer.msg("请输入捐款金额", {
                    offset: '50%'
                })
                return false
            }

            if (showname == undefined) {
                layer.msg("请选择是否显示姓名", {
                    offset: '50%'
                })
                return false
            }
            name = $(".name").val()
            tel = $(".tel").val()
            email = $(".email").val()
            if (showname == 1) {
                if (name == "") {
                    layer.msg("请输入捐赠人姓名", {
                        offset: '50%'
                    })
                    return false
                } else if (tel == "") {
                    layer.msg("请输入联系电话", {
                        offset: '50%'
                    })
                    return false
                } else if (email == "") {
                    layer.msg("请输入电子邮箱", {
                        offset: '50%'
                    })
                    return false
                }
            }
            payway = $("input[name='zhifufangshi']:checked").val();
            if (payway == undefined) {
                layer.msg("请选择支付方式", {
                    offset: '50%'
                })
                return false
            }
            if (payway == "3") {
                kanum = $("#kanum").val();
                if (kanum == "") {
                    layer.msg("请填写您的转账卡号", {
                        offset: '50%'
                    })
                    return false
                }

            }
            if (jine > 10000 && payway !== "3") {
                layer.msg("捐款金额最小为0.01元，最大10000元,超过请选择线下方式捐赠", {
                    offset: '50%'
                })
                return false
            }
            isagree = $(".juanzengxieyi").prop("checked")
            if (!isagree) {
                layer.msg("请阅读并同意《捐赠协议》", {
                    offset: '50%'
                })
                return false
            }

            msg = $(".liuyan").val()
            $("#jine").text(jine);
            if (showname == 1) {
                $(".shiming").css("display", "table-row")
                $("#showname").text("实名");
                $("#name").text(name);
                $("#tel").text(tel);
                $("#email").text(email);
            } else if (showname == 0) {
                $("#showname").text("匿名");
                $(".shiming").css("display", "none")
            }
            if (payway == 2) {
                $("#payway").text("微信");
                $(".kahao").css("display", "none")
                $("#pay").css("display", "inline-block")
                $(".next-button4").css("display", "none")
            } else if (payway == 1) {
                $("#payway").text("支付宝");
                $(".kahao").css("display", "none")
                $("#pay").css("display", "inline-block")
                $(".next-button4").css("display", "none")
            } else if (payway == 3) {
                $("#pay").css("display", "none")
                $(".next-button4").css("display", "inline-block")
                $("#payway").text("线下");
                $(".kahao").css("display", "table-row")
                $("#kanum1").text(kanum)
            }
            $("#msg").text(msg);
            $(".donation2").css("display", "none");
            $(".donation3").css("display", "block")

        })
        // 第er个上一步显示上个页面
        $(".pre-button2").on("click", function () {
            $(".donation2").css("display", "block")
            $(".donation3").css("display", "none")
        })
        $(".next-button4").on("click", function () {
            $.ajax({
                url: getRequestPrefix() + '/user/loveDouation/addLoveDouation', //保存用户的信息
                type: "POST",
                // 设置的是请求参数
                data: {
                    amount: jine.toString(),
                    isRealName: showname,
                    payType: payway,
                    name: name,
                    tel: tel,
                    email: email,
                    message: msg,
                    bankAccount: kanum
                },
                dataType: 'json',
                success: function (res) {
                    layer.msg(
                        '名称：山东省足球运动协会<br>统一社会信用代码：51370000MJD6115927<br>地址、电话：济南市经十路122号 0531-82072513<br>开户行：建设银行股份有限公司济南玉函支行<br>账号：37001616359050019959', {
                            time: 60000, //60s后自动关闭
                            btn: ['确认', '取消']
                        });
                }
            })

        })



        // 第一个下一步显示下个页面
        $(".next-button3").on("click", function () {
            clearInterval(timeOut)
            $("#paycode").children().remove();
            $("#error").css("display", "none");

            $.ajax({
                url: getRequestPrefix() + '/user/loveDouation/addLoveDouation', //保存用户的信息
                type: "POST",
                // 设置的是请求参数
                data: {
                    amount: jine.toString(),
                    isRealName: showname,
                    payType: payway,
                    name: name,
                    tel: tel,
                    email: email,
                    message: msg
                },
                dataType: 'json',
                success: function (res) {
                    if (res.msg == 0) { //获取捐赠金额和表id
                        var id = res.loveDouationInfo.id;
                        var amount = res.loveDouationInfo.amount;
                        if (res.loveDouationInfo.payType == 1) {
                            $.ajax({
                                url: getRequestPrefix() +
                                    '/alipay/creatLoveDouationAlipayUrl',
                                type: "POST",
                                // 设置的是请求参数
                                data: {
                                    amount: amount,
                                    douationId: id
                                },
                                dataType: 'json',
                                success: function (data) { //获取二维码url和订单号
                                    if (data.msg == 0) {
                                        // 处理倒计时
                                        console.log("处理倒计时")
                                        // 如果countTimeOut有值，表示之前操作为关闭
                                        if (!countTimeOut) {
                                            handleCountTime(true);
                                        }
                                        // document.getElementById("paycode")
                                        new QRCode(document.getElementById(
                                            "paycode"), data.url);
                                        layer.open({
                                            type: 1,
                                            title: false //不显示标题栏
                                                ,
                                            offset: '150px',
                                            closeBtn: 1,
                                            area: '300px',
                                            shade: 0.5,
                                            id: 'LAY_layuipro' //设定一个id，防止重复弹出
                                                ,
                                            btn: ['残忍拒绝'],
                                            btnAlign: 'c',
                                            moveType: 1 //拖拽模式，0或者1
                                                ,
                                            content: $("#pay1"),
                                            // 关闭后不再调用接口
                                            yes: function (index, layero) {
                                                clearInterval(timeOut)
                                                defaultShow()
                                                layer.close(index)
                                            },
                                            cancel: function (index, layero) {
                                                clearInterval(timeOut)
                                                defaultShow()
                                                layer.close(index)
                                            }
                                        });
                                        timeOut = setInterval(function () {
                                            $.ajax({ //轮询查看支付结果
                                                type: "POST",
                                                url: "http://newtest.sdfa.org.cn/footballAssociation/alipay/getPaymentStatus",
                                                data: {
                                                    orderNum: data
                                                        .orderNum
                                                },
                                                dataType: "JSON",
                                                success: function (
                                                    back) {
                                                    console.log(
                                                        "backbackbackbackbackback",
                                                        back,
                                                        typeof back
                                                        .msg)
                                                    if (back.msg ==
                                                        "0") {
                                                        clearInterval
                                                            (
                                                                timeOut
                                                            )
                                                        // 清除倒计时
                                                        clearInterval
                                                            (
                                                                countTimeOut
                                                            )
                                                        // 清空countTimeOut对象
                                                        countTimeOut
                                                            =
                                                            undefined;
                                                        layer.alert(
                                                            "谢谢您对足球发展的一份爱心!", {
                                                                title: "支付成功",
                                                                cancel: function () {
                                                                    window
                                                                        .location
                                                                        .href =
                                                                        "http://newtest.sdfa.org.cn/foundation/donation.html?id=95"
                                                                }
                                                            },
                                                            function () {
                                                                window
                                                                    .location
                                                                    .href =
                                                                    "http://newtest.sdfa.org.cn/foundation/donation.html?id=95"
                                                            })
                                                    }
                                                }
                                            });
                                        }, 5000)
                                    } else {
                                        // 处理倒计时
                                        handleCountTime(false);
                                        // 二维码失效,关闭后重试
                                        document.getElementById("error").innerText =
                                            "二维码生成失败,请关闭重试";
                                        layer.msg(res.msg)
                                    }
                                }
                            })

                        } else if (res.loveDouationInfo.payType == 2) {
                            $.ajax({
                                url: getRequestPrefix() +
                                    '/wxPay/loveDouationWeiXinPay',
                                type: "POST",
                                // 设置的是请求参数
                                data: {
                                    amount: amount,
                                    douationId: id
                                },
                                dataType: 'json',
                                success: function (data) { //获取二维码url和订单号
                                    if (data.msg == 0) {
                                        // 处理倒计时
                                        console.log("处理倒计时")
                                        // 如果countTimeOut有值，表示之前操作为关闭
                                        if (!countTimeOut) {
                                            handleCountTime(true);
                                        }
                                        new QRCode(document.getElementById(
                                                "paycode"), data.packageParams
                                            .code_url);
                                        layer.open({
                                            type: 1,
                                            title: false //不显示标题栏
                                                ,
                                            offset: '150px',
                                            closeBtn: 1,
                                            area: '300px;',
                                            shade: 0.5,
                                            id: 'LAY_layuipro' //设定一个id，防止重复弹出
                                                ,
                                            btn: ['残忍拒绝'],
                                            btnAlign: 'c',
                                            moveType: 1 //拖拽模式，0或者1
                                                ,
                                            content: $("#pay1"),
                                            // 关闭后不再调用接口
                                            yes: function (index, layero) {
                                                clearInterval(timeOut)
                                                defaultShow()
                                                layer.close(index)
                                            },
                                            cancel: function (index, layero) {
                                                clearInterval(timeOut)
                                                defaultShow()
                                                layer.close(index)
                                            }
                                        });
                                        timeOut = setInterval(function () {
                                            $.ajax({ //轮询查看支付结果
                                                type: "POST",
                                                url: "http://newtest.sdfa.org.cn/footballAssociation/alipay/getPaymentStatus",
                                                data: {
                                                    orderNum: data
                                                        .orderNum
                                                },
                                                dataType: "JSON",
                                                success: function (
                                                    back) {
                                                    if (back.msg ==
                                                        "0") {
                                                        clearInterval
                                                            (
                                                                timeOut
                                                            )
                                                        // 清除倒计时
                                                        clearInterval
                                                            (
                                                                countTimeOut
                                                            )
                                                        // 清空countTimeOut对象
                                                        countTimeOut
                                                            =
                                                            undefined;
                                                        layer.alert(
                                                            "谢谢您对足球发展的一份安心!", {
                                                                title: "支付成功",
                                                                cancel: function () {
                                                                    window
                                                                        .location
                                                                        .href =
                                                                        "http://newtest.sdfa.org.cn/foundation/donation.html?id=95"
                                                                }
                                                            },
                                                            function () {
                                                                window
                                                                    .location
                                                                    .href =
                                                                    "http://newtest.sdfa.org.cn/foundation/donation.html?id=95"
                                                            })
                                                    }
                                                }
                                            });
                                        }, 5000)
                                    } else {
                                        // 处理倒计时
                                        handleCountTime(false);
                                        // 二维码失效,关闭后重试
                                        document.getElementById("error").innerText =
                                            "二维码生成失败,请关闭重试";
                                        layer.msg(res.msg)

                                    }
                                }
                            })
                        }
                    }
                }
            })
        })


        // 添加倒计时  <div>
        function handleCountTime(status) {
            var time = codeLimitTime - 1;
            // 二维码失效时间 5分钟
            if (!status) {
                document.getElementById('minute').innerText = "00";
                document.getElementById('second').innerText = "00";
            };
            if (status) {
                countTimeOut = setInterval(function () {
                    if (time <= 0) {
                        clearInterval(countTimeOut)
                        // 二维码失效,关闭后重试
                        document.getElementById("error").innerText = "二维码失效,关闭后重试"
                        document.getElementById("error").style.display = "block"

                    }
                    var formatData = formatSeconds(time);
                    console.log("formatData", formatData)
                    document.getElementById('minute').innerText = formatData[0];
                    document.getElementById('second').innerText = formatData[1];
                    time--;
                }, 1000)
            }
        }

        // 转换秒为 分 秒格式
        function formatSeconds(time) {
            var secondTime = time;
            var minuteTime = 0;
            // var hourTime = 0;
            var secondResult;
            var minuteResult;

            if (secondTime > 60) {
                minuteTime = parseInt(secondTime / 60);
                secondTime = parseInt(secondTime % 60);
                if (minuteTime > 60) {
                    // hourTime =  parseInt(minuteTime / 60);
                    minuteTime = parseInt(minuteTime % 60);
                }
            }

            if (secondTime.toString().length === 1) {
                secondResult = "0" + parseInt(secondTime)
            } else {
                secondResult = "" + parseInt(secondTime);
            }

            if (minuteTime > 0) {
                if (minuteTime.toString().length === 1) {
                    minuteResult = "0" + parseInt(minuteTime)
                } else {
                    minuteResult = "" + parseInt(minuteTime)
                }
            } else {
                minuteResult = "00";
            }

            return [minuteResult, secondResult]
        }

        // 倒计时 清除并回归默认值
        function defaultShow() {
            // 清除倒计时
            clearInterval(countTimeOut)
            // 清空countTimeOut对象
            countTimeOut = undefined;
            document.getElementById('minute').innerText = "05";
            document.getElementById('second').innerText = "00";
        }

        function getRequestPrefix() {
            // 获取网络协议
            // 获取主机名+端口号
            // return urlPrefix = "http://192.168.0.160:8083/footballAssociation";
            return urlPrefix = 'http://newtest.sdfa.org.cn/footballAssociation';
            var domainPort = window.location.host;
            // 获取发布项目的名称
            // 获取路径
            var url = window.location.pathname;
            var webApp = url.split('/')[1];
            // http://127.0.0.1/demo
            var urlPrefix = "http://" + domainPort + "/" + webApp;
            return urlPrefix;
        }
    </script>

</body>

</html>